import React, { Component } from 'react';
import styles from './style.scss';
import PropTypes from 'prop-types';
import { noop } from '@utils';
import { Input } from 'antd';

class Inputs extends Component {
    /*
     * @param{type} A B C D  input的长短,默认是C
     * @param{validateType} 文本框限制类型 number,letter,both 数字，字母，数字字母
     * @param{maxLength} input的最大长度
     */
    static propTypes = {
        ysSize: PropTypes.string,
        validateType: PropTypes.string,
        maxLength: PropTypes.number,
        onChange: PropTypes.func,
        error:PropTypes.bool,
    };

    static defaultProps = {
        ysSize: 'C',
        validateType: '',
        maxLength: 30,
        error:false,
        onChange: () =>{}
    };

    render() {
        const { error , className, ysSize, validateType, maxLength, ...others} = this.props;

        let divCls = error ? `${styles[ysSize]} ${styles['border-red']}` : `${styles[ysSize]}`;

        className && (divCls += ` ${className}`);

        let onChange;

        switch(validateType){
            case 'number':
                onChange = (e) => {
                    e.target.value = e.target.value.replace(/\D/g,'');
                }
                break;
            case 'letter':
                onChange = (e) => {
                    e.target.value = e.target.value.replace(/[^a-zA-Z]/g,'');
                }
                break;
            case 'both':
                onChange = (e) => {
                    e.target.value = e.target.value.replace(/[\W]/g,'');
                }
                break;
            default:
                onChange = this.props.onChange;
                break;
        }
        return (
            <Input onChange={onChange} {...others} maxLength={maxLength} className={divCls} />
        );
    }
}

export default Inputs;